// 搜索页面
<template>
  <div class="searchPage">
    <div class="seaheader">
      <span class="iconfont iconjiantou2" @click="goback"></span>
      <!-- 输入框的框框 -->
      <div class="search">
        <span class="iconfont iconsearch"></span>
        <input type="text" v-model="keyword" />
      </div>
      <!-- 点击搜索按钮 -->
      <div class="seabtn" @click="searchArtcile">搜索</div>
    </div>
    <!-- 搜索历史记录 -->
    <div class="historyList" v-if="articleList.length == 0">
      <h2>历史记录</h2>
      <div class="list">
        <!-- 遍历历史记录 -->
        <!-- 当点击历史记录时，把相关的文章加载出来 -->
        <div
          class="item"
          @click="historysearch(item)"
          v-for="(item, index) in $store.state.historyList"
          :key="index"
        >
          <!-- item:关键词 -->
          {{ item }}
        </div>
      </div>
    </div>
    <!-- 引入文章列表组件 -->
    <div class="resList">
      <!-- <Article /> 不可以直接为空，否则会报错 -->
      <!-- 插入文章组件 -->
      <Article
        :articleData="article"
        v-for="article in articleList"
        :key="article.id"
      />
    </div>
  </div>
</template>

<script>
import Article from "../components/Article";
export default {
  components: {
    Article,
  },
  data() {
    return {
      keyword: "",
      articleList: [],
      // history: [],
    };
  },
  created() {
    // 当进入页面时，如果有历史记录，就把历史记录从local storage里面拿出来！！
    if (localStorage.getItem("history")) {
      const oldHistory = JSON.parse(localStorage.getItem("history"));
      this.$store.commit('recoverHistory',oldHistory)
    }
  },
  watch: {
    keyword(newVal) {
      // 监听输入框里的值，是否为空，如果为空，就清空文章列表
      if (!newVal) {
        this.articleList = [];
      }
    },
    // 历史记录持久化：每当数据发生变化，就存到local storage
    // history() {
    //   // localStorage只能存字符串！！不能存数组！！
    //   localStorage.setItem("history", JSON.stringify(this.history));
    // },
    // 'this.$store.state.historyList':function(){   不要this！！监听不需要this！！
      '$store.state.historyList':function(){
      localStorage.setItem("history", JSON.stringify(this.$store.state.historyList));
    }
  },
  methods: {
    searchArtcile() {
      // 点击搜索之后，添加关键词到历史记录里面
      // this.history.push(this.keyword);
      // 如果想添加历史记录从前面到后面排列：
      // this.history.unshift(this.keyword);
      // this.$store.state.commit('addHistory',this.keyword)  错误！！
           this.$store.commit('addHistory',this.keyword)
      this.$axios({
        url: "/post_search",
        // get请求：参数不是data！！是params
        params: {
          // 输入框输入的值 作为参数发送到后台
          keyword: this.keyword,
        },
      }).then((res) => {
        console.log(res.data);
        this.articleList = res.data.data;
      });
    },
    goback() {
      if (this.articleList.length > 0) {
        this.articleList = [];
        this.keyword = "";
      } else {
        this.$router.back();
      }
    },
    historysearch(item) {
      // 当点击历史记录时，把相关的文章加载出来
      // 这时的关键词等于这个函数所带的参数
      this.keyword = item;
      this.searchArtcile();
    },
  },
};
</script>

<style lang="less" scoped>
.searchPage {
  padding: 0 16 / 360 * 100vw;
  //   box-sizing: border-box;
  // 搜索页面头部样式
  .seaheader {
    display: flex;
    height: 58 / 360 * 100vw;
    align-items: center;
    // 中间的搜索筐
    .search {
      flex-grow: 1;
      border: 1px solid #888;
      height: 38 / 360 * 100vw;
      border-radius: 19 / 360 * 100vw;
      display: flex;
      align-items: center;
      padding: 0 10 / 360 * 100vw;
      margin: 0 16 / 360 * 100vw;
      .iconfont {
        padding-right: 10 / 360 * 100vw;
      }
      input {
        width: 180 / 360 * 100vw;
        border: none;
        outline: none;
        background-color: #f2f2f2;
      }
    }
  }
  //   搜索页面的历史记录布局：
  .historyList {
    h2 {
      font-size: 18 / 360 * 100vw;
    }
    .list {
      display: flex;
      .item {
        padding: 10 / 360 * 100vw;
        padding-left: 0;
      }
    }
  }
}
</style>